<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
   <!-- 准备一个具有宽高的盒子 -->
   <div style="width: 600px; height: 400px;"></div>

   <!-- 引入echarts -->
   <script src="./lib/echarts.min.js"></script>
 
   <script>
     // 1. 初始化echarts（写法固定）
     // let 变量 = echarts.init(盒子)
     let myChart = echarts.init(document.querySelector('div'))
 
     // 2. 配置echarts图表（配置项决定了图表的样子）
     // let 配置项 = {}
     let option = {
// 标题配置

      title:{

        text:'冯宇26了',
      left:'center',
      textStyle:{  

        
fontSize: 18,
}
          },

// X轴上文字配置

       xAxis: {
         type: 'category',
         data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
       },

       yAxis: {
         type: 'value'
       },
       series: [
         {
           data: [150, 300, 450, 500, 450, 300, 150],
           type: 'line',
           name:'月收入'
         },
         {
           data: [150, 280, 330, 400, 330, 280, 150],
           type: 'line',
           name:'年收入'
         },
         {
           data: [150, 280, 330, 400, 330, 280, 150],
           type: 'bar',
           barWidth:'30%',
           name:'总收入'
         },
       ],
       color:['red','green',{
  type: 'linear',
  x: 0,
  y: 0,
  x2: 0,
  y2: 1,
  colorStops: [{
      offset: 0, color: 'red' // 0% 处的颜色
  }, 
  {
      offset: 0.5, color: 'green' // 0% 处的颜色
  },
  {
      offset: 1, color: 'blue' // 100% 处的颜色
  }],
  global: false // 缺省为 false
}],
// 网格配置（坐标轴这个区域）
grid: {
    top: 100 // 调整坐标轴区域的位置
  },
  // 图例（用于表达 每个图形的意义）
  // 需要series中，每项数据必须定义name名字
  legend: {
    top: 60
  },
  // 提示框组件
  tooltip: {
    // 提示的触发方式
    // 默认是 item，鼠标放到每一项上才能提示
    // 可选 axis ，鼠标放到轴上即可提示
    trigger: 'axis',
  }
     }
 
     // 3. 根据配置项，创建图表（写法固定）
     myChart.setOption(option) // setOption 第1个O是大写的
 
   </script>
</body>
</html>